<template>
	<div id="s2">
		<el-container class='s1-container'>
			<!-- 头部区域 -->
			<el-header></el-header>
			<!-- 主体区域 -->
			<el-main>
			<Steps ref="activeChange"></Steps>
				<div class="box">
					<div id="box1" @click="confirm($event)">①</div>
					<div class="box2">
						<div @click="confirm($event)">②</div>
						<div @click="confirm($event)">②</div>
						<div @click="confirm($event)">②</div>
					</div>
					<div id="box3" @click="confirm($event)">③</div>
				</div>
			</el-main>
			<!-- 底部区域 -->
			<el-footer></el-footer>
		</el-container>
	</div>
</template>

<script>
	// 导入组件
	import Steps from '../../components/Steps'
	export default {
		name: 'S2',
		data() {
			return {
				
			}
		},
		components: {
			Steps,
		},
		methods: {
			confirm(event) {
				// 得到DOM标签的内容
				const model = event.target.innerHTML
				// 提示是否确认的弹框
				this.$confirm('将对' + model + '进行压痕试验，是否继续？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					customClass: 'yes-model',
					type: 'warning',
				}).then((action) => {
					this.$message({
						type: 'success',
						message: '开始对' + model + '进行压痕试验！',
					})
					// 确认按钮回调路由
					if(action === 'confirm'){
							this.$router.push({path:'/S3'},)
					}
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消对' + model + '进行压痕试验！'
					});
				});
			}
		},
		mounted(){
			this.$refs.activeChange.active = 1
		}
	}
</script>

<!-- 设置页面样式 -->
<style scoped>
	.box {
		margin: 100px;
		width: 400px;
		height: 100px;
		/* 将鼠标改为手型 */
		cursor: pointer;
	}

	#box1,
	.box2,
	#box3 {
		color: white;
		font-size: 2.5rem;
	}

	#box1 {
		background-color: blueviolet;
		width: 400px;
		height: 100px;
	}

	.box2 {
		display: flex;
		justify-content: space-around;
		width: 400px;
		height: 100px;
	}

	.box2 div {
		background-color: brown;
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	#box3 {
		background-color: goldenrod;
		width: 400px;
		height: 100px;
	}

	/* 设置头部和底部的样式 */
	.el-header,
	.el-footer {
		background-color: #333333;
		color: #333;
		text-align: center;
		line-height: 80px;
	}

	/* 设置主体部分样式 */
	.el-main {
		text-align: center;
		height: 640px;
	}
</style>
<style type="text/css">
	/* 修改按钮颜色样式 */
	.yes-model .el-message-box__btns .el-button:nth-child(2) {
		border: 1px solid #dcdfe6;
		background-color: #85ce61;
	}
</style>
